<template>
  <div class="previewImage" @click="hideImage">
    <swiper class="previewImageSwiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide class="previewImageSwiperSlide" v-for="(item,index) in previewImageUrls" :key="index">
        <img v-lazy="item" alt />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import {mapActions,mapGetters} from "vuex"
export default {
  name: "PreviewImage",
  data() {
    return {
      urls:""
    };
  },
  mounted(){
      this.swiper.slideTo(this.previewImageIndex,0,false);
  },
  computed: {
     ...mapGetters(["previewImageUrls","previewImageIndex"]),
    swiperOption() {},
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    ...mapActions(["hidePreviewImage"]),
    hideImage() {
        this.hidePreviewImage();
    }
  },
  components: {
    swiper,
    swiperSlide
  }
};
</script>
<style lang="scss" scoped>
.previewImage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  z-index: 9999;
  .previewImageSwiper {
    width: 100%;
    height: 100%;
    .previewImageSwiperSlide {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      > img {
        width: 100%;
        height: auto;
        max-height: 100%;
      }
    }
  }
}
</style>